<form class="layui-form " action="" lay-filter="dataForm">
    <input type="hidden" name="id" value="{$info.id}">
    <div class="layui-form-item">
        <label class="layui-form-label">商品名称</label>
        <div class="layui-input-block">
            <label class="layui-form-label" style="text-align: left;padding-left: 0; width:600px;">
                {$info.name}
            </label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">吊牌价</label>
        <div class="layui-input-inline">
            <input type="text" name="tag_price" lay-verify="required" autocomplete="off" placeholder="请输入吊牌价" class="layui-input"
                value="{$info.tag_price}">
        </div>
    </div>
    {if condition="($Think.session.admin_info.permission==10)"/}
    <div class="layui-form-item">
        <label class="layui-form-label">销量</label>
        <div class="layui-input-inline">
            <input type="text" name="sales" lay-verify="required" autocomplete="off" placeholder="请输入吊牌价" class="layui-input"
                value="{$info.sales}">
        </div>
    </div>
    {/if}
    <div class="layui-form-item">
        <label class="layui-form-label">规格</label>
        <div class="layui-input-block">
            <div id="specificationsDiv"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="dataSubmit">保存</button>
        </div>
    </div>
</form>

<script id="tableTpl" type="text/html">
    <table class="layui-table">
        <thead>
            <tr>
                <th>名称</th>
                {if condition="($Think.session.admin_info.permission==6)"} 
                <th>供货价</th>
                <th>库存</th>
                <th>编码</th>
                {elseif condition="($Think.session.admin_info.permission==10)"/}
                <th>真实供货价</th>
                <th>帮主供货价</th>
                <th>帮会价</th>
                <th>建议零售价</th>
                <th>库存</th>
                <!-- 后台的建议零售价 其实是初始默认零售价 帮主上架官方产品的时候设置 必须大于这个值 -->
                {/if}
            </tr>
        </thead>
        <tbody>
            {{#  layui.each(d, function(index, item){ }}
            <tr>
                {if condition="($Think.session.admin_info.permission==6)"} 
                <td><input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="title" name="specifications[{{index}}][title]" value="{{ item.title || '' }}"/></td>
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="real_supply" name="specifications[{{index}}][real_supply]" value="{{ item.real_supply || '0' }}"/></td>
                <td><input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="stock" name="specifications[{{index}}][stock]" value="{{ item.stock || '0' }}"/></td>
                <td><input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="code" name="specifications[{{index}}][code]" value="{{ item.code || '' }}"/><i class="layui-icon layui-table-tips-c layui-icon-close"></i></td>
                {elseif condition="$Think.session.admin_info.permission==10"/}
                <td>{{ item.title || '' }}</td>
                <td>￥{{ item.real_supply || '0' }}</td>
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="supply_price" name="specifications[{{index}}][supply_price]" value="{{ item.supply_price || '0' }}"/></td>   
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="gang_price" name="specifications[{{index}}][gang_price]" value="{{ item.gang_price || '0' }}"/></td> 
                <td>￥<input type="text" class="layui-input layui-table-edit" data-index="{{index}}" data-item="retail_price" name="specifications[{{index}}][retail_price]" value="{{ item.retail_price || '0' }}"/></td> 
                <td>{{ item.stock || '0' }}<i class="layui-icon layui-table-tips-c layui-icon-close"></i></td>
                {/if}                
            </tr>
            {{#  }); }}
            {{#  if(d.length === 0){ }}
            <tr><td colspan="6">无规格</td></tr>
            {{#  } }} 
        </tbody>
    </table>
    <button type="button" class="layui-btn addSpec">添加规格</button>
</script>
<script>
    layui.use(['form', 'http', 'laydate', 'upload', 'laytpl'], function () {
        var form = layui.form;
        var http = layui.http;
        var $ = layui.$;
        var laytpl = layui.laytpl;
        var specifications = <?php echo json_encode($info['specifications']?$info['specifications']:[]);?>;
        var getTpl = tableTpl.innerHTML,
            view = document.getElementById('specificationsDiv');
        laytpl(getTpl).render(specifications, function (html) {
            view.innerHTML = html;
        });

        $("body").on('click', '.layui-table .layui-icon-close', function (e) {
            var index = $(".layui-table .layui-icon-close").index($(this))
            specifications.splice(index, 1)
            console.log('删除后', specifications)
            laytpl(getTpl).render(specifications, function (html) {
                view.innerHTML = html;
            });
        })
        $("body").on('click', '.addSpec', function () {
            specifications.push({})
            console.log('添加后', specifications)
            laytpl(getTpl).render(specifications, function (html) {
                view.innerHTML = html;
            });
        })
        $("body").on('blur', '.layui-table-edit', function () {
            var index = $(this).data('index')
            var item = $(this).data('item')
            specifications[index][item] = $(this).val()
            console.log(specifications)
        })

        form.val('dataForm', {
            "id": "{$info.id}",
        })
        //监听提交
        form.on('submit(dataSubmit)', function (data) {
            var d = data.field
            d['specifications'] = specifications
            http.post('/product/specificationsedit', d, function (res) {
                if (res.code == 0) {
                    parent.layui.table.reload('dataTable');
                    parent.layer.closeAll('page');
                }
            }, $(this))
            return false;
        })
    })
</script>